<template>
  <div class="login-page">
    <!-- 顶部导航栏，是一个通用组件 -->
    <van-nav-bar
      title="面经登录"
    />
    <!-- 去vatn-ui里面找form组件 -->
    <van-form @submit="onSubmit" @failed="onFailed">
      <van-field
        v-model="username"
        name="username"
        label="用户名11"
        placeholder="用户名222"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码11"
        placeholder="密码22"
        :rules="rules"
      />
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <!-- 注册的文字 -->
    <!-- <router-link></router-link> -->
    <div class="lp-text van-cell" @click="$router.push('/register')">没有账号，去注册</div>
  </div>
</template>

<script>
// 按需导入，需要教大括号
import { loginRequest } from '@/api/user'
import { setToken } from '@/utils/storage'

export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: '',
      rules: [
        { required: true, message: '请填写密码' },
        { pattern: /^\S{6,16}$/, message: '密码格式不对，必须输入6-16位' }
      ]
    }
  },
  methods: {
    async onSubmit (values) {
      // heima1234  123456
      // 4xx 开头都是 前端的错误
      // 400 401 比如账号密码输入错误
      // 403 账号密码输入正确，但是没有权限
      // 404 请求地址找不到
      console.log('校验成功', values)
      const res = await loginRequest({ username: this.username, password: this.password })
      // 登录成功以后，将tokne先保存起来，然后在跳转到首页
      // localStorage.setItem('heimm_mianjin_token', res.data.token)
      setToken(res.data.token)
      this.$router.push('/article')
    },
    onFailed (e) {
      console.log('校验失败', e)
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
.van-nav-bar {
  border: 1px solid #ccc;
}
.lp-text {
  justify-content: end;
  top: -15px;
  color: lightblue;
}
</style>
